<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="roleList" >

      <el-table-column label="版本号" prop="versionCode" align="center">
        <template #default="{row}">
          <div>
            {{row.versionCode || '--'}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="Android" prop="downloadUrl" align="center">
        <template #default="{row}">
          <div>
            {{row.downloadUrl || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ios" prop="iosDownloadUrl" align="center">
        <template #default="{row}">
          <div>
            {{row.iosDownloadUrl || '--'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
        <template #default="{row}">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(row)"
          >修改
          </el-button>

        </template>
      </el-table-column>
    </el-table>


    <add ref="addRef" @success="getList"/>
  </div>
</template>

<script>
import {mH5VersionList, removeH5} from "@/api/version/version"
import add from "./components/add.vue"
export default {
  name: "Role",
  components: {
    add
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题


    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询角色列表 */
    async getList() {
      this.roleList=[]
      this.loading = true
      let res = await mH5VersionList()
      this.roleList.push(res.data)
      this.loading = false
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm")
      this.handleQuery()
    },

    /** 新增按钮操作 */
    handleAdd() {
     this.$refs.addRef.onOpen()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.addRef.onOpen(row.id)
    },
  }
}
</script>
